<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="6">
            <el-form-item label="标题:">
              <el-input v-model="postForm.searchName" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="small" @click="query()">查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="标题"
        />
        <el-table-column
          prop="sendUserName"
          header-align="center"
          align="center"
          label="提交人"
        />
        <el-table-column
          prop="firstParty"
          header-align="center"
          align="center"
          label="甲方"
        />
        <el-table-column
          prop="governor"
          header-align="center"
          align="center"
          label="甲方主管"
        />
        <el-table-column
          prop="secondParty"
          header-align="center"
          align="center"
          label="乙方"
        />
        <el-table-column
          prop="secondAgent"
          header-align="center"
          align="center"
          label="乙方经办人"
        />
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="合同名称"
        />
        <el-table-column
          prop="fulfilTime"
          header-align="center"
          align="center"
          label="履行期限"
        />
        <el-table-column
          prop="contractType"
          header-align="center"
          align="center"
          label="合同类型"
        />
        <el-table-column
          prop="projectType"
          header-align="center"
          align="center"
          label="项目类型"
        />
        <el-table-column
          prop="auditState"
          header-align="center"
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditState === 0" size="small">未审</el-tag>
            <el-tag v-else-if="scope.row.auditState === 1" size="small">审核中</el-tag>
            <el-tag v-else size="small">已审</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="button"
              class="el-button el-button--primary el-button--mini"
              @click="editInfo(scope.$index, scope.row)"
            >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form ref="info" :model="info" label-position="left" label-width="150px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="标题:">
              <el-input v-model="info.title" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提交人:">
              <el-input v-model="info.sendUserName" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方:">
              <el-input v-model="info.firstParty" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲方主管:">
              <el-input v-model="info.governor" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方经办人:">
              <el-input v-model="info.firstAgent" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲方电话:">
              <el-input v-model="info.firstMobile" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="乙方:">
              <el-input v-model="info.secondParty" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方地址:">
              <el-input v-model="info.address" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="乙方经办人:">
              <el-input v-model="info.secondAgent" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方电话:">
              <el-input v-model="info.secondMobile" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称:">
              <el-input v-model="info.name" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法定/授权代表人:">
              <el-input v-model="info.legalUser" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="履行期限:">
              <el-input v-model="info.fulfilTime" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额:">
              <el-input v-model="info.money" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="份数正本:">
              <el-input v-model="info.originalNum" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="份数副本:">
              <el-input v-model="info.ectypeNum" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="日期:">
              <el-input v-model="info.time" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同类型:">
              <el-input v-model="info.contractType" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型:">
              <el-input v-model="info.projectType" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态:">
              <el-input v-if="info.auditState === 0" value="未审" readonly />
              <el-input v-else-if="info.auditState === 1" value="审核中" readonly />
              <el-input v-else value="已审" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="抄送人:">
          <el-input v-model="info.copySendUsersName" type="textarea" readonly />
        </el-form-item>
        <el-form-item label="内容:">
          <el-input v-model="info.content" type="textarea" readonly />
        </el-form-item>
        <el-form-item label="文件:">
          <el-image
            v-for="(path, index) in info.filePathList"
            :key="path + index"
            style="width: 100px; height: 100px;margin: 5px;"
            :src="path"
            fit="cover"
            :preview-src-list="info.filePathList"
          />
        </el-form-item>
        <el-form-item label="审核信息:" style="background-color: #EBEEF5">
        </el-form-item>
        <el-collapse v-model="collapseNames" @change="handleChange">
          <el-collapse-item v-for="(item, index) in auditList" :key="item.userId" :title="item.userName" :name="index">
            <el-row type="flex" justify="space-between" :gutter="20">
              <el-col :span="12">
                <el-form-item label="审核状态:">
                  <el-input v-if="item.state === 0" value="未审" readonly />
                  <el-input v-else value="已审" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核时间:">
                  <el-input v-model="item.time" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="审核内容:">
              <el-input v-model="item.content" type="textarea" readonly />
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getInfo, page } from '@/api/app/contract.js'

  export default {
    data() {
      return {
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 10,
        // 页码
        currentPage: 1,
        postForm: { searchName: '' },
        info: {},
        tableData: [],
        centerDialogVisible: false,
        title: '查看',
        auditList: [],
        collapseNames: ['0'],
        rules: {
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 查询条件
      query() {
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.postForm.searchName).then(response => {
          this.total = response.count
          this.tableData = response.data
        })
      },
      /**
       * 编辑
       * @param row
       */
      editInfo(index, row) {
        this.collapseNames = ['0']
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data
          this.auditList = JSON.parse(this.info.auditInfo)
        })
      }
    }
  }
</script>

